<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
	<link rel="stylesheet" href="css/mop-lqs.css">

<style type="text/css">
	#loading{
		z-index:1002;
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -48.5px; 
		width: 99px;
		height: 99px; 
	}

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=50);
}
    .jiedan{
        display: none;
        width:5.4rem;
        height:3.87rem;
        background:rgba(247,247,247,1);
        opacity:0.96;
        position: absolute;
        top: 40%;
        left: 15%;
        z-index:1003;
        border-radius: .2rem;
        font-size: 0.28rem;

    }
    .jiedan section{
        width:5.4rem;
        height:.92rem;
        background:rgba(30,129,210,1);
        opacity:0.96;
        border-radius:0.2rem .2rem 0  0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.34rem;
        color: #ffffff;
    }
    .jiedan aside div{
        height: 0.73rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
    }
    .jiedan aside div p{
        color: #1e81d2;
    }
</style>

</head>

<body style="background-color: #f4f9fd;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1 mui-action-back"><a><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">赚钱</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->

<!--Account selection begin-->
<article class="height-padding account-selection">
    <div class="set-makeMoney">
        <div>
            <li><p class="fl"><span>ID:</span>21890474</p>
                <p class="fl complete"><span>完成率</span>100%</p></li>
        </div>
        <div class="clearfix">
            <p>设置好每个平台的模式，可以组合多个平台同时接单</p>
        </div>
        <div>
            <p><span>淘宝任务:</span>全部/全部/0-2000元</p>
        </div>
    </div>
</article>
<!--Account selection end-->

<!--Shopping mall begin-->
<article class=" account-selection make-money-new">
    <section>
        <main>
            <div><img src="images/img_taobao.png"></div>
            <div>添加淘宝账号</div>
        </main>
    </section>
    <section>
        <main>
            <div><img src="images/img_taobao.png"></div>
            <div>添加阿里巴巴账号</div>
        </main>
    </section>
    <section>
        <main>
            <div><img src="images/img_taobao.png"></div>
            <div>添加拼多多账号</div>
        </main>
    </section>
    <section>
        <main>
            <div><img src="images/img_taobao.png"></div>
            <div>添加美丽说账号</div>
        </main>
    </section>
    <section>
        <main>
            <div><img src="images/img_taobao.png"></div>
            <div>添加京东账号</div>
        </main>
    </section>
    <section>
        <main>
            <div><img src="images/img_taobao.png"></div>
            <div>添加蘑菇街账号</div>
        </main>
    </section>
    


</article>
<!--Shopping mall end-->


<!--Receipt-->
<a name="alreadyConnectedTask" class="receipt">接单</a>
<div id="loading">
	<div class='mop-load-x'></div>
</div>
<article class="jiedan">
    <section>来任务啦</section>
    <aside>
        <div><label>任务类型：</label><p id='taskName'>手机淘宝垫付任务</p></div>
        <div><label>垫付金额：</label><p id='price'>37元</p></div>
        <div><label>任务佣金：</label><p>8.2金</p></div>
        <div><label>任务限时：</label><p>2小时</p></div>
    </aside>
</article>
<div id="fade" class="black_overlay"></div>
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mop-lqs.js"></script>


<script>
	
	function pageJump(dom){
		var name = $(dom).attr('name')
		mui.openWindow({
			url: name+".html",
			id: name
		})
	}
	var ws
	mui.init({
		keyEventBind: {
			swipeBack:true, //启用右滑关闭功能
			backbutton: false,  //关闭back按键监听
			beforeback: function(){
				ws.close()
				return true
			}
		}
	});
	$(function() {
		mui.plusReady(function() {
			var user = JSON.parse(plus.storage.getItem('user'))
			$('.receipt').click(function(){
				//显示遮罩
				$('#loading').show()
				$('#fade').show()
				//连接websocket
				ws = new WebSocket('ws://120.78.90.235/tbk/ws/'+user.id)
				ws.onopen = function() {
					plus.nativeUI.toast('接单中请不要关闭此页面')
				}
				ws.onmessage = function(evt) {
					var options = {cover:false,title:'接到新的任务'}
					var str = '消息:'+evt.data
					plus.push.createMessage( str, "LocalMSG", options )
					if(plus.os.name=="iOS"){
						console.log('*如果无法创建消息，请到"设置"->"通知"中配置应用在通知中心显示!');
					}
					console.log(evt.data)
					var data = JSON.parse(evt.data)
					$('#taskName').html(data.task.taskName)
					$('#price').html(data.task.goods1RealPrice)
					$('#loading').hide()
					$('.jiedan').show()
					ws.close()
					console.log(data.order)
					localStorage.setItem("havepandingId",data.order);
					console.log(localStorage.getItem("havepandingId"));
					setTimeout(function(){
						mui.openWindow({
							url: "taobaoMobileMission_new4.html",
							id: 'taobaoMobileMission',
							createNew:true,
							extras:{
								param: evt.data
							},
						})
						plus.webview.currentWebview().close()
					},3000)
					//plus.nativeUI.toast(evt.data)
				};
	
				ws.onclose = function(evt) {
					if(evt.code === 1006){
						plus.nativeUI.toast('诶...网络好像有点问题')
						$('#loading').hide()
						$('#fade').hide()
					}
				};
				
				ws.onerror = function(evt) {
					plus.nativeUI.toast('诶...网络好像有点问题')
					$('#loading').hide()
					$('#fade').hide()
				};
				plus.push.addEventListener("receive",function(msg){
					plus.nativeUI.toast("receive"+msg)
				},true)
				plus.push.addEventListener("click",function(msg){
					plus.nativeUI.toast("click"+msg)
				},true)
				plus.push.setAutoNotification( true )
				
				return false
			})
			
		})
	})
				
</script>
</html>